<template>
  <div class="content-box">
    <div ref="searchBox" class="search-box flex" v-show="showSearch">
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        label-width="100px"
      >
        <el-form-item label="渠道名称" style="margin-right: 20px" prop="productName">
          <el-input
            v-model="queryParams.productName"
            placeholder="请输入"
            style="width: 240px; margin-right: 20px"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item
          label="关联公司"
          style="margin-right: 20px"
          prop="companyIds"
        >
          <el-select
            v-model="queryParams.companyIds"
            multiple
            collapse-tags
            clearable
            filterable
            placeholder="请选择"
            style="width: 240px;margin-right: 20px"
          >
            <el-option
              v-for="(item, index) in companyIdOption"
              :key="index"
              :label="item.companyName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="状态"
          style="margin-right: 20px"
          prop="status"
        >
          <el-select
            v-model="queryParams.status"
            clearable
            filterable
            placeholder="请选择"
            style="width: 240px; margin-right: 20px"
          >
            <el-option
              v-for="(item, index) in statusOption"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="采量渠道"
          style="margin-right: 20px"
          prop="isPick"
        >
          <el-select
            v-model="queryParams.isPick"
            clearable
            filterable
            placeholder="请选择"
            style="width: 240px; margin-right: 20px"
          >
            <el-option
              v-for="(item, index) in isPickOption"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="渠道类型"
          style="margin-right: 20px"
          prop="productType"
        >
          <el-select
            v-model="queryParams.productType"
            clearable
            filterable
            placeholder="请选择"
            style="width: 240px; margin-right: 20px"
          >
            <el-option
              v-for="(item, index) in productTypeOption"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        
        <el-form-item
          label="查询时间"
          prop="dateRange"
        >
          <el-date-picker
            :style="{width: device === 'mobile'? '280px' :'355px', marginRight: '20px'}"
            clearable
            v-model="dateRange"
            type="datetimerange"
            range-separator="至"
            value-format="yyyy-MM-dd HH:mm:ss"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            plain
            >查询</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
          <el-button
            type="primary"
            size="mini"
            v-hasPermi="['business:channel:add']"
            @click="handelDialog('添加', null)"
            >添加渠道</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <div class="table-box">
      <el-row :gutter="10" class="mb8">
        <right-toolbar
          :showSearch.sync="showSearch"
          @queryTable="handleQuery"
          :columns="columns"
        ></right-toolbar>
      </el-row>
      <el-table
        v-sticky-header
        ref="table"
        v-loading="loading"
        :data="dataList"
      >
        <template v-for="(item,index) in columns.slice(0,columns.length - 1)">
          <el-table-column
            :key="index"
            :label="item.label"
            :prop="item.prop"
            :width="getColumnWidth(index)"
            align="center"
            :fixed="item.fixed"
            :sortable="item.sortable ? item.sortable : false"
            :show-overflow-tooltip="item.showTooltip"
            v-if="item.visible"
          >
            <template slot-scope="scope">
              <!-- 采量渠道单独处理 -->
              <template v-if="item.prop === 'isPick'">
                <el-tag 
                  :type="isPickColor(scope.row[item.prop])" 
                  >
                  {{ ArrayFormatObj(isPickOption)[scope.row[item.prop]]}}
                </el-tag>
              </template>
              <!--上下线状态单独处理 -->
              <div v-else-if="item.prop === 'status'" @click="showOrOffPopo(scope.row)">
                <el-popover
                  placement="top"
                  trigger="click"
                  :value ="rowIndex === scope.row.id"
                  title="上下线状态操作"
                  >
                  <el-form >
                    <el-form-item style="margin-bottom: 0;">
                      <el-radio-group v-removeAriaHidden v-model="upAndDownLinesStates" >
                        <el-radio 
                         v-for="(item,index) in statusOption" 
                        :key="index" :label="item.value">{{ item.label }}
                      </el-radio>
                     </el-radio-group>
                    </el-form-item>
                    <el-form-item style="display: flex;justify-content: center;margin-bottom: 8px;">
                      <el-button type="primary" @click="clickSubmitOnOrOff(scope.row)">提交</el-button>
                      <el-button @click="clickCancelOnOrOff(scope.row)">取消</el-button>
                    </el-form-item>
                  </el-form>
                  <el-button 
                     slot="reference"
                     :type="statusColor(scope.row[item.prop])" 
                     size="mini" 
                   >{{ ArrayFormatObj(statusOption)[scope.row[item.prop]]}}</el-button>
                </el-popover> 
              </div>
              <!--自动回调状态单独处理 -->
              <div v-else-if="item.prop === 'isAuto'">
                <el-popconfirm
                  :title="`确定重新${
                    !scope.row[item.prop] ? '开启' : '关闭'
                  }吗？`"
                  @confirm="changeIsAuto(scope.row)"
                >
                  <el-button
                    slot="reference"
                    :type="scope.row[item.prop] ? 'primary' : 'warning'"
                    size="mini"
                    >{{ scope.row[item.prop] ? "开启" : "关闭" }}</el-button
                  >
                </el-popconfirm>
              </div>
               <!--手机号验证单独处理 -->
               <div v-else-if="item.prop == 'isPhone'" @click="showPhonePopo(scope.row)">
                <el-popover
                  placement="top"
                  title="手机号验证操作"
                  :value ="phoneRowIndex === scope.row.id"
                  trigger="click"
                  >
                  <el-form style="width: 240px;" :model="PhoneParams" :rules="isPhoneRules" :ref="`phone_${scope.row.id}`">
                    <el-form-item label="手机号验证状态" :prop="PhoneParams.isValid!=null?'isValid':''" style="margin-bottom: 0;">
                      <el-radio-group v-removeAriaHidden v-model="PhoneParams.isValid" >
                        <el-radio 
                         v-for="(item,index) in isPhoneOption" 
                        :key="index" :label="item.value">{{ item.label }}
                      </el-radio>
                     </el-radio-group>
                    </el-form-item>
                    <el-form-item
                      v-if="PhoneParams.isValid"
                      label="验证金额" prop="money"
                      style="margin-bottom: 10px;"
                    >
                      <el-input-number 
                        v-model="PhoneParams.money" 
                        controls-position="right" 
                        placeholder="请输入验证金额"
                        :min="0" 
                        :precision="2"
                        style="width: 100%;"
                      >
                      </el-input-number>
                    </el-form-item>
                    <el-form-item style="display: flex;justify-content: center;margin-bottom: 0;">
                      <el-button type="primary" @click="clickSubmitPhone(scope.row,`phone_${scope.row.id}`)">提交</el-button>
                      <el-button @click="clickCancelPhone(scope.row)">取消</el-button>
                    </el-form-item>
                  </el-form>
                  <el-button 
                     slot="reference"
                     size="mini" 
                     :style="{
                      color:'#fff',
                      backgroundColor: scope.row[item.prop]?'#A9BE7B':'#12264F',
                      borderColor: scope.row[item.prop]?'#A9BE7B':'#12264F'
                    }"
                   >{{ ArrayFormatObj(isPhoneOption)[scope.row[item.prop]]}}</el-button>
                </el-popover> 
              </div>
              <!--二要素验证单独处理 -->
              <div v-else-if="item.prop == 'isUser'" @click="showUserPopo(scope.row)">
                <el-popover
                  placement="top"
                  title="二要素验证操作"
                  :value ="userRowIndex === scope.row.id"
                  trigger="click"
                  >
                  <el-form style="width: 240px;" :model="userParams" :rules="isPhoneRules" :ref="`user_${scope.row.id}`">
                    <el-form-item label="二要素验证状态" :prop="userParams.isValid!=null?'isValid':''" style="margin-bottom: 0;">
                      <el-radio-group v-removeAriaHidden v-model="userParams.isValid" >
                        <el-radio 
                         v-for="(item,index) in isPhoneOption" 
                        :key="index" :label="item.value">{{ item.label }}
                      </el-radio>
                     </el-radio-group>
                    </el-form-item>
                    <el-form-item
                      v-if="userParams.isValid"
                      label="验证金额" prop="money"
                      style="margin-bottom: 10px;"
                    >
                      <el-input-number 
                        v-model="userParams.money" 
                        controls-position="right" 
                        placeholder="请输入验证金额"
                        :min="0" 
                        :precision="2"
                        style="width: 100%;"
                      >
                      </el-input-number>
                    </el-form-item>
                    <el-form-item style="display: flex;justify-content: center;margin-bottom: 0;">
                      <el-button type="primary" @click="clickSubmitUser(scope.row,`user_${scope.row.id}`)">提交</el-button>
                      <el-button @click="clickCancelUser(scope.row)">取消</el-button>
                    </el-form-item>
                  </el-form>
                  <el-button 
                     slot="reference"
                     size="mini" 
                     :style="{
                      color:'#fff',
                      backgroundColor: scope.row[item.prop]?'#EF845D':'#bb5100',
                      borderColor: scope.row[item.prop]?'#EF845D':'#bb5100'
                    }"
                   >{{ ArrayFormatObj(isUserOption)[scope.row[item.prop]]}}</el-button>
                </el-popover> 
              </div>
              <!--手机号屏蔽单独处理 -->
              <div v-else-if="item.prop === 'isShield'">
                <el-popconfirm
                  :title="`确定重新${
                    !scope.row[item.prop] ? '开启' : '关闭'
                  }吗？`"
                  @confirm="changeisShield(scope.row)"
                >
                  <el-button
                    slot="reference"
                    :type="scope.row[item.prop] ? 'primary' : 'info'"
                    size="mini"
                    :style="{
                      color:'#fff',
                      backgroundColor: scope.row[item.prop]?'#81663B':'#5AA4AE',
                      borderColor: scope.row[item.prop]?'#81663B':'#5AA4AE',
                    }"
                    >{{ scope.row[item.prop] ? "开启" : "关闭" }}</el-button
                  >
                </el-popconfirm>
              </div>
              <!--星级回传单独处理 -->
              <div v-else-if="item.prop === 'isStar'">
                <el-popconfirm
                  :title="`确定重新${
                    !scope.row[item.prop] ? '开启' : '关闭'
                  }吗？`"
                  @confirm="changeIsStar(scope.row)"
                  v-if="[0].includes(scope.row['isPick'])"
                >
                  <el-button
                    slot="reference"
                    :type="scope.row[item.prop] ? 'primary' : 'info'"
                    size="mini"
                    :style="{
                      color:'#fff',
                      backgroundColor: scope.row[item.prop]?'#D6C560':'#757CBB',
                      borderColor: scope.row[item.prop]?'#D6C560':'#757CBB',
                    }"
                    >{{ scope.row[item.prop] ? "开启" : "关闭" }}</el-button
                  >
                </el-popconfirm>
              </div>
              <!--撞库通过率单独处理 -->
              <div v-else-if="item.prop === 'isPassRatio'">
                <el-popconfirm
                  :title="`确定重新${
                    !scope.row[item.prop] ? '开启' : '关闭'
                  }吗？`"
                  @confirm="changeIIsPassRatio(scope.row)"
                >
                  <el-button
                    slot="reference"
                    :type="scope.row[item.prop] ? 'primary' : 'info'"
                    size="mini"
                    :style="{
                      color:'#fff',
                      backgroundColor: scope.row[item.prop]?'#8aabcc':'#d9a0b3',
                      borderColor: scope.row[item.prop]?'#8aabcc':'#d9a0b3',
                    }"
                    >{{ scope.row[item.prop] ? "开启" : "关闭" }}</el-button
                  >
                </el-popconfirm>
              </div>
              <!-- 回传限制单独处理 -->
              <div v-else-if="item.prop === 'starLimit'">
                <el-tag 
                  :type="starLimitColor(scope.row[item.prop])" 
                  >
                  {{ ArrayFormatObj(isUserOption)[scope.row[item.prop]]}}
                </el-tag>
              </div>
              <!-- 掩码类型单独处理 -->
              <div v-else-if="item.prop === 'maskLen'">
                {{ ArrayFormatObj(maskLenOption)[scope.row[item.prop]] || '-'}}
              </div>
              <!-- 撞库类型单独处理 -->
              <div v-else-if="item.prop === 'isAll'">
                {{ ArrayFormatObj(isAllOption)[scope.row[item.prop]] || '-'}}
              </div>
              <!-- 车抵单独处理 -->
              <div v-else-if="item.prop === 'isCar'">
                {{ ArrayFormatObj(isCarOption)[scope.row[item.prop]] || '-'}}
              </div>
              <span v-else>
                {{  scope.row[item.prop] }}
              </span>
            </template>
        </el-table-column>
        </template>
        <el-table-column
          fixed="right"
          :prop="columns[columns.length - 1].prop"
          :label="columns[columns.length - 1].label"
          align="center"
          :width="getColumnWidth(columns.length - 1)"
          v-if="columns[columns.length - 1].visible"
        >
          <template slot-scope="scope">
            <div :class="['flex-center','flex']">
                <!-- <el-button
                 type="text"
                 v-hasPermi="['business:channel:query']"
                 @click="handelDialog('查看', scope.row)"
                 >查看</el-button
               > -->
               <el-button
                 type="text"
                 v-hasPermi="['business:channel:edit']"
                 @click="handelDialog('编辑', scope.row)"
                 >编辑</el-button
               >
               <el-button
                 type="text"
                 @click="handelDialog('星级回传', scope.row)"
                 style="color:#389e0d;"
                 v-if="[0].includes(scope.row['isPick'])"
                 >星级回传</el-button
               >
               <el-button
                 type="text"
                 @click="handelDialog('撞库通过率', scope.row)"
                 style="color:#6c216d;"
                 >撞库通过率</el-button
               >
               <el-button
                 type="text"
                 @click="handelDialog('回传限制', scope.row)"
                 style="color:#08979c;"
                 >回传限制</el-button
               >
               <el-button
                 type="text"
                 v-hasPermi="['business:channel:extract']"
                 @click="handelDialog('抽单设置', scope.row)"
                 style="color:#E6A23C;"
                 >抽单设置</el-button
               >
               <el-button
                 v-if="scope.row.isPick == 1"
                 type="text"
                 @click="handelDialog('采量限制', scope.row)"
                 style="color:#7600bb;"
                 >采量限制</el-button
               >
                <el-button
                 type="text"
                 style="color: #d4380d"
                 v-if="scope.row['upRewardType'] == 0"
                 @click="handelDialog('城市变价', scope.row)"
                 >城市变价</el-button
               >
               <el-popconfirm
                 title="确定要删除该渠道吗？"
                 style="margin-left: 10px"
                 @cancel="hanCancelDel"
                 @confirm="handelDel(scope.row)"
               >
                  <el-button 
                  slot="reference"
                  type="text"
                  v-hasPermi="['business:channel:remove']"
                  style="color: #ff116e"
                  >删除</el-button>
               </el-popconfirm>
            </div>
            
          </template>
        </el-table-column>
      </el-table>
      <!-- 使用分页插件 -->
      <pagination
        v-show="total > 0"
        :total="total"
        :page-sizes="[10, 50, 100, 200, 500]"
        :page.sync="queryParams.pageIndex"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <!-- 对话框 -->
    <el-dialog
      :title="title"
      width="800px"
      :visible.sync="dialogShow"
      :before-close="handleClose"
      :modal="!addTaskShow"
      :close-on-click-modal="!addTaskShow"
    >
      <el-form :model="form" :rules="rules" label-width="140px" ref="formRef" >
        <!-- 抽单设置信息 -->
        <template v-if="['extract'].includes(currentOperation)">
           <el-form-item label="不抽基数" prop="extractBase">
              <el-input-number 
                  v-model="form.extractBase" 
                  controls-position="right" 
                  placeholder="请输入"
                  :min="0" 
                  style="width: 100%;"
              >
              </el-input-number>
           </el-form-item>
           <el-form-item label="抽金间隔" prop="extractGap">
              <el-input-number 
                  v-model="form.extractGap" 
                  controls-position="right" 
                  placeholder="请输入"
                  :min="0" 
                  style="width: 100%;"
              >
             </el-input-number>
           </el-form-item>
           <el-form-item label="抽金基数金额" prop="extractMoney">
              <el-input-number 
                  v-model="form.extractMoney" 
                  controls-position="right" 
                  placeholder="请输入"
                  :min="0" 
                  :precision="2"
                  style="width: 100%;"
              >
             </el-input-number>
           </el-form-item>
           <el-form-item label="是否抽金" prop="isExtract" style="width: 50%;margin-right: 35px;">
              <el-radio-group 
                @change="changeSelect('extractRatio')"
                v-removeAriaHidden v-model="form.isExtract">
                <el-radio 
                 v-for="(item,index) in isExtractOption" 
                 :key="index" :label="item.value">{{ item.label }}
                </el-radio>
              </el-radio-group>
           </el-form-item>
           <el-form-item 
              v-if="form.isExtract"
              label="抽取进件比例" prop="extractRatio">
              <el-input-number 
                  v-model="form.extractRatio" 
                  controls-position="right" 
                  placeholder="请输入"
                  :min="0" 
                  :precision="2"
                  style="width: 100%;"
              >
             </el-input-number>
           </el-form-item>
        </template>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleSubmit('formRef')"
          >确 定</el-button
        >
        <el-button @click="handleClose">取 消</el-button>
      </div>
      <!-- 上下线添加任务对话框 -->
      <el-dialog
         title="添加上下线任务"
         width="400px"
         :visible.sync="addTaskShow"
         :before-close="closeAddTask"
         :modal="false"
         :close-on-click-modal="false"
        >
        <el-form :model="form" :rules="rules" ref="formRef" label-width="80px">
          <el-form-item
            label="类型"
            prop="addTaskType"
          >
            <el-select
              v-model="form.addTaskType"
              clearable
              filterable
              placeholder="请选择"
              style="width: 100%"
           >
             <el-option
               v-for="(item, index) in addTaskTypeOption"
               :key="index"
               :label="item.label"
               :value="item.value"
             ></el-option>
            </el-select>
          </el-form-item>
          <!-- 时间单独处理 -->
          <el-form-item
            label="时间"
            prop="time"
          >
            <template v-if="form.addTaskType === 0 ">
              <el-time-picker
                v-model="form.time"
                placeholder="任意时间点"
                style="width: 100%"
              >
              </el-time-picker>
            </template>
            <template v-else>
              <el-date-picker
                v-model="form.time"
                type="datetime"
                placeholder="选择日期时间"
                style="width: 100%"
              >
              </el-date-picker>
            </template>
          </el-form-item>
          <el-form-item
            label="任务"
            prop="addTaskStatus"
          >
            <el-select
              v-model="form.addTaskStatus"
              clearable
              filterable
              placeholder="请选择"
              style="width: 100%"
           >
             <el-option
               v-for="(item, index) in addTaskStatusOption"
               :key="index"
               :label="item.label"
               :value="item.value"
             ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="handleSubmit('formRef')">保存</el-button>
          <el-button @click="closeAddTask">取 消</el-button>
        </div>
      </el-dialog>
    </el-dialog>
    <!-- 星级回传 -->
    <StarHaulEdit ref="starHaulEditRef" @refreshStarHaul="getList"></StarHaulEdit>
    <!--撞库通过率  -->
    <IsPassRatioEdit  ref="isPassRatioEditRef" @refreshStarHaul="getList"></IsPassRatioEdit>
    <!-- 回传限制-->
    <starUpLimit ref="starUpLimitRef" @refreshStarHaul="getList"></starUpLimit>
    <!-- 采量限制 -->
    <PickEditDialog ref="pickEditDialogRef" width="80%"></PickEditDialog>
    <!-- 城市变价组件 -->
    <cityUpdPrice ref="cityUpdPriceRef"></cityUpdPrice>
  </div>
</template>

<script>
import tableStickyMixins from "@/mixins/tableStickyMixins";
import { mapGetters } from "vuex";
import {
  listUpChannel,
  delUpChannel,
  onOrOff,
  editExtract,
  queryExtractById,
  onOrOffAuto,
  isPhoneValidate,
  isUserValidate,
  onOrOffShield,
  starHaulOnOrOff,
  isPassRatio,
  starHaulQueryById,
  queryPassRatioById,
  getStarUpLimit,
  
} from '@/api/business/channelManagement'
import {getUpCompanyList} from '@/api/business/upCompanyManagement'
import PickEditDialog from './PickEditDialog.vue';
import StarHaulEdit from './starHaulEdit.vue';
import IsPassRatioEdit from './isPassRatioEdit.vue';
import starUpLimit from "./starUpLimit.vue";
import cityUpdPrice from "./cityUpdPrice.vue";

export default {
  // 定义名字用于标识该组件是否被keep-alive缓存
  name: "ChannelManagement",
  components: {
    PickEditDialog,
    StarHaulEdit,
    IsPassRatioEdit,
    starUpLimit,
    cityUpdPrice,
  },
  data() {
    return {
      // 渠道管理列表
      dataList: [],
      // 关联公司筛选项
      affiliatesOption: [],
      // 查询时间方式
      queryTimeStyle:[
        { label: "添加时间", value: 'addTime' },
        { label: "首次上线", value: 'firstTimeOnline' },
        { label: "最后上线", value: 'lastSeen' },
        { label: "最后下线", value: 'finallyOffline' },
      ],
      // 授权模式筛选项
      authorizationModeOption:[
        { label: "前置授权", value: 0 },
        { label: "后置授权", value: 1 },
      ],
      // 更多推荐产品筛选项
      recommendedProductsOption:[
        { label: "显示", value: 1 },
        { label: "隐藏", value: 0 },
      ],
      // 添加任务类型筛选项
      addTaskTypeOption:[
        { label: "每天", value: 0 },
        { label: "指定", value: 1 },
      ],
      // 添加任务状态筛选项
      addTaskStatusOption:[
        { label: "上线", value: 1 },
        { label: "下线", value: 0 },
      ],  
      // 是否抽金筛选项
      isExtractOption:[
        { label: "否", value: 0 },
        { label: "是", value: 1 },
      ], 
      // 采量渠道筛选项
      isPickOption:[
        { label: "助贷", value: 0 },
        { label: "采量", value: 1 },
        // { label: "未知", value: null },
      ],
      productTypeOption:[
        { label: "api全流程", value: 1 },
        { label: "api半流程", value: 2 },
        { label: "H5半流程", value: 3 },
      ],
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageIndex: 1,
        pageSize: 10,
      },
      // 时间范围
      dateRange: [],
      loading: false,
      // 表格列信息
      columns: [
        {label: `ID`,prop: "id",visible: true,pcWidth: 140,mobileWidth: 120,fixed: null,showTooltip: true,},
        {label: `渠道名称`,prop: "productName",visible: true,pcWidth: 200,mobileWidth: 150,fixed: null,showTooltip: true,},
        {label: `关联公司/包`,prop: "companyName",visible: true,pcWidth: 150,mobileWidth: 120,fixed: null,showTooltip: true,},
        {label: `采量渠道`,prop: "isPick",visible: true,pcWidth: 120,mobileWidth: 120,fixed: null,showTooltip: true,},
        {label: `渠道类型`,prop: "productTypeStr",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,},
        {label: `掩码类型`,prop: "maskLen",visible: true,pcWidth: 100,mobileWidth: 100,fixed: null,showTooltip: true,},
        {label: `撞库类型`,prop: "isAll",visible: true,pcWidth: 100,mobileWidth: 100,fixed: null,showTooltip: true,},
        {label: `车抵`,prop: "isCar",visible: true,pcWidth: 100,mobileWidth: 100,fixed: null,showTooltip: true,},

        {label: `渠道状态`,prop: "status",visible: true,pcWidth: 120,mobileWidth: 100,fixed: null,showTooltip: true,},
        {label: `自动回调状态`,prop: "isAuto",visible: true,pcWidth: 120,mobileWidth: 100,fixed: null,showTooltip: true,},
        {label: `手机号验证状态`,prop: "isPhone",visible: true,pcWidth: 120,mobileWidth: 100,fixed: null,showTooltip: true,},
        {label: `二要素验证状态`,prop: "isUser",visible: true,pcWidth: 120,mobileWidth: 100,fixed: null,showTooltip: true,},
        {label: `手机号屏蔽状态`,prop: "isShield",visible: true,pcWidth: 120,mobileWidth: 100,fixed: null,showTooltip: true,},
        {label: `星级回传`,prop: "isStar",visible: true,pcWidth: 120,mobileWidth: 100,fixed: null,showTooltip: true,},
        {label: `撞库通过率`,prop: "isPassRatio",visible: true,pcWidth: 120,mobileWidth: 100,fixed: null,showTooltip: true,},
        {label: `回传限制`,prop: "starLimit",visible: true,pcWidth: 100,mobileWidth: 100,fixed: null,showTooltip: true,},
        
        {label: `渠道标签`,prop: "productLabelStr",visible: true,pcWidth: 130,mobileWidth: 110,fixed: null,showTooltip: true,},
        {label: `数据推送限制`,prop: "pushTypeStr",visible: true,pcWidth: 130,mobileWidth: 110,fixed: null,showTooltip: true,},
        {label: `上游结算模式`,prop: "upRewardTypeStr",visible: true,pcWidth: 130,mobileWidth: 110,fixed: null,showTooltip: true,},
        {label: `结算比例`,prop: "upRewardRatio",visible: true,pcWidth: 130,mobileWidth: 110,fixed: null,showTooltip: true,sortable: true,},
        {label: `管理员`,prop: "manageUserName",visible: true,pcWidth: 130,mobileWidth: 110,fixed: null,showTooltip: true,},
        {label: `机构数据权重`,prop: "pushWeightStr",visible: true,pcWidth: 130,mobileWidth: 110,fixed: null,showTooltip: true,},
        {label: `创建时间`,prop: "createTime",visible: true,pcWidth: 160,mobileWidth: 120,fixed: null,showTooltip: true,sortable: true,},
        {label: `操作`,prop: "operation",visible: true,pcWidth: 200,mobileWidth: 100,fixed: "right",showTooltip: true},
      ],
      // 显示搜索栏
      showSearch: true,
      // 弹框标题
      title: "",
      // 弹框显示状态
      dialogShow: false,
      // 弹框的表单信息
      form: {},
      // 弹框表单校验规则
      rules: {
        addTaskType:[
          { required: true, message: "请选择类型", trigger: "change" },
        ],
        addTaskStatus:[
          { required: true, message: "请选择任务", trigger: "change" },
        ],
      },
      // 当前激活项行数据
      row:{},
      // 关联公司筛选项
      companyIdOption: [],
      // 掩码类型
      maskLenOption:[
        { label: "MD5撞库", value: 0 },
        { label: "表单直推", value: 1 },
        { label: "八位掩码", value: 8 },
        { label: "九位掩码", value: 9 },
      ],
      // 撞库类型
      isAllOption:[
        { label: "全资", value: 0 },
        { label: "非全资", value: 1 },
      ],
      // 车抵
      isCarOption:[
        { label: "否", value: 0 },
        { label: "是", value: 1 },
      ],
      // 渠道状态筛选项
      statusOption:[
        { label: "在线", value: 0 },
        { label: "下线", value: 1 },
        { label: "停用", value: 2 },
      ],
      // 临时状态变量
      tempStatus:null,
      // 当前激活项行数据
      rowIndex:null,
      // 上下线状态
      upAndDownLinesStates:null,

      // 上下线添加任务弹框显示状态
      addTaskShow: false,

      // 手机号验证当前激活项行数据
      phoneRowIndex:null,
      // 手机号验证状态筛选项
      isPhoneOption:[
         { label: "关闭", value: 0 },
         { label: "开启", value: 1 },
      ],
      // 手机号验证参数
      PhoneParams: {},
      // 手机号验证弹框表单校验规则
      isPhoneRules:{
        isValid:[
          { required: true, message: "请选择手机号验证状态", trigger: "change" },
        ],
        money:[
          { required: true, message: "请填写验证金额", trigger: "blur" },
        ]
      },

      // 二要素验证当前激活项行数据
      userRowIndex:null,
      // 二要素验证状态筛选项
      isUserOption:[
         { label: "关闭", value: 0 },
         { label: "开启", value: 1 },
      ],
      // 二要素验证参数
      userParams: {},
      // 二要素验证弹框表单校验规则
      isUserRules:{
        isValid:[
          { required: true, message: "请选择二要素验证状态", trigger: "change" },
        ],
        money:[
          { required: true, message: "请填写验证金额", trigger: "blur" },
        ]
      },

      
      
    };
  },
  mixins: [tableStickyMixins],
  watch: {
    columns: {
      handler() {
        // 清空popover激活项索引
        this.rowIndex = null
        this.phoneRowIndex = null
        this.userRowIndex = null
        this.updateTableHeight();
      },
      deep: true,
    },
    dataList:{
      handler() {
        // 清空popover激活项索引
        this.rowIndex = null
        this.phoneRowIndex = null
        this.userRowIndex = null
      },
      deep: true,
    },
  },
  created() {
    this.init();
    this.getcompanyIdList()
  },
  activated(){
     if(this.$previousRouteUrl === '/business/channelManagement/detail'){
        // 只重新刷新数据不重新更新筛选项
        this.init();
     }
     // 清空popover激活项索引
     this.rowIndex = null
  },
  computed: {
    ...mapGetters(["sidebar", "device"]),
    // 对状态进行处理
    statusColor:()=>{
        return (state)=>{
           switch(state){
             case 0:
                return 'success';
             case 1:
                return 'info';
             case 2:
                return 'danger';
             default:
           }
        }
     },
    // 采量渠道标签颜色处理
    isPickColor:()=>{
        return (state)=>{
           switch(state){
             case 0:
                return 'success';
             case 1:
                return 'warning';
             case null:
                return 'info';
             default:
           }
        }
    },
    // 回传限制标签颜色处理
    starLimitColor:()=>{
        return (state)=>{
           switch(state){
             case 0:
                return 'warning';
             case 1:
                return 'success';
             case null:
                return 'info';
             default:
           }
        }
    },
     // 将数组转换为对象形式
    ArrayFormatObj:()=>{
        return (arr)=>{
          return arr.reduce((pre, cur)=>{
            pre[cur.value] = cur.label;
            return pre;
          },{})
        }
     },
    // 计算当前列元素在所处环境的宽度
    getColumnWidth() {
      return (index) => {
        return this.isMobile
          ? this.columns[index].mobileWidth
          : this?.sidebar?.opened
          ? this.columns[index]?.pcWidth - this.slightWidth
          : this.columns[index]?.pcWidth + 17;
      };
    },
    // (判断当前所处操作)
    currentOperation() {
      switch(this.title){
        case '抽单设置':
          return 'extract'
        case '渠道上下线':
          return 'upAndDownLines';
        case '渠道上下线记录':
          return 'upAndDownLinesRecord';
        default:
          // 其他操作
      }
    },
  },
  methods: {
     // 自动回调状态切换触发回调
     changeIsAuto(row) {
      const params = {
        id: row?.id,
        isAuto: row?.isAuto ? 0 : 1,
      };
      onOrOffAuto(params).then((res) => {
        if (res.code === 200) {
          this.$message.success("操作成功");
          this.getList();
        }
      });
    },
    // 手机号屏蔽切换触发回调
    changeisShield(row) {
      const params = {
        id: row?.id,
        isShield: row?.isShield ? 0 : 1,
      };
      onOrOffShield(params).then((res) => {
        if (res.code === 200) {
          this.$message.success("操作成功");
          this.getList();
        }
      });
    },
    // 星级回传切换触发回调
    changeIsStar(row) {
      const params = {
        id: row?.id,
        isStar: row?.isStar ? 0 : 1,
      };
      starHaulOnOrOff(params).then((res) => {
        if (res.code === 200) {
          this.$message.success("操作成功");
          this.getList();
        }
      });
    },
    // 撞库通过率切换触发回调
    changeIIsPassRatio(row) {
      const params = {
        id: row?.id,
        isPassRatio: row?.isPassRatio ? 0 : 1,
      };
      isPassRatio(params).then((res) => {
        if (res.code === 200) {
          this.$message.success("操作成功");
          this.getList();
        }
      });
    },
    // 获取关联公司列表
    getcompanyIdList() {
      getUpCompanyList().then((res) => {
        this.companyIdOption = res.data;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.$set(this.queryParams, "pageIndex", 1);
      this.getList();
    },
      // 切换选择器删除控制的属性
      changeSelect(prop,defalutValue){
      // 如果是数组则循环删除
      if(Array.isArray(prop)){
        prop.forEach(item=>{
          this.deleteProp(item,defalutValue)
        })
      }else{
        this.deleteProp(prop,defalutValue)
      }
    },
    deleteProp(prop,defalutValue){
      if(prop === null) return
       if(prop.includes('.')){
            let [key,value] = prop.split('.')
            if(defalutValue){
              this.$set(this.form[key],value,defalutValue)
              return
            }
            this.$delete(this.form[key],value)
            return
        }
        this.$delete(this.form,prop)
    },
    // 显示上下线弹出窗回调
    showOrOffPopo(row) {
      // 设置上下线状态
      this.upAndDownLinesStates = row?.status
      // 设置索引打开弹窗
      this.rowIndex = row?.id
      // 设置临时变量
      this.tempStatus = row?.status;       
    },
    // 点击取消修改上下线状态
    clickCancelOnOrOff(row){
       row.status = this.tempStatus
       this.$message.info("取消操作");
       this.rowIndex = null;
    },
    // 点击提交修改上下线状态
    clickSubmitOnOrOff(row) {
      const params = {
        id: row?.id,
        status:this.upAndDownLinesStates,
      };
      if(this.upAndDownLinesStates===this.tempStatus){
        return this.$message.error(`渠道已${this.ArrayFormatObj(this?.statusOption)[row?.status]},请勿重复操作！`);
      }
      onOrOff(params).then((res) => {
        if(res.code === 200){
          this.$message.success("操作成功");
          this.getList();
          this.rowIndex = null;
        }
      });
    },
    /** 重置按钮操作 */
    resetQuery() {
      // 完全重置到初始状态
      this.$set(this, "queryParams", {
        pageIndex: 1,
        pageSize: 10,
      });
      // 重置时间范围
      this.$set(this, "dateRange", []);
      this.init();
    },
    init() {
      this.getList();
    },
    /** 查询列表 */
    getList() {
      this.loading = true;
      if (this.dateRange?.length) {
        this.queryParams.createTimeStart = this.dateRange[0];
        this.queryParams.createTimeEnd = this.dateRange[1];
      }else{
        delete this.queryParams.createTimeStart
        delete this.queryParams.createTimeEnd
      }
      listUpChannel(this.queryParams).then((response) => {
        this.dataList = response?.data?.list;
        this.total = response?.data?.total;
        this.loading = false;
      }).catch((err) => {
        setTimeout(() => {// 延迟2s后自动取消加载状态
          this.loading = false;
        }, 2000);
      })
    },
     // 显示手机号验证弹出窗回调
     showPhonePopo(row) {
      // 设置手机号验证状态
      this.$set(this,'PhoneParams',{
        id: row?.id,
        isValid: row?.isPhone,
        money: row?.phoneMoney
      })
      // 设置索引打开弹窗
      this.phoneRowIndex = row?.id
    },
    // 点击取消手机号验证
    clickCancelPhone(row){
      this.$message.info("取消操作");
      this.phoneRowIndex = null;
    },
    // 点击提交手机号验证
    clickSubmitPhone(row,formName){
      this.$refs[formName][0].validate((valid) => {
        if (valid) {
          let params={};
          params = JSON.parse(JSON.stringify(this.PhoneParams))
          if(params.isValid  != 0){
              params.money  = params.money.toFixed(2)
          }else{
              params.money  = "0.00"
          }
          console.log(params);
          isPhoneValidate(params).then((res) => {
            if(res.code === 200){
              this.$message.success("操作成功");
              this.getList();
              this.phoneRowIndex = null;
            }
          });

        }
      })
    },


    // 显示二要素验证弹出窗回调
    showUserPopo(row) {
      // 设置二要素验证状态
      this.$set(this,'userParams',{
        id: row?.id,
        isValid: row?.isUser,
        money: row?.userMoney
      })
      // 设置索引打开弹窗
      this.userRowIndex = row?.id
    },
    // 点击取消二要素验证
    clickCancelUser(row){
      this.$message.info("取消操作");
      this.userRowIndex = null;
    },
    // 点击提交二要素验证
    clickSubmitUser(row,formName){
      this.$refs[formName][0].validate((valid) => {
        if (valid) {
          let params={};
          params = JSON.parse(JSON.stringify(this.userParams))
          if(params.isValid  != 0){
              params.money  = params.money.toFixed(2)
          }else{
              params.money  = "0.00"
          }
          console.log(params);
          isUserValidate(params).then((res) => {
            if(res.code === 200){
              this.$message.success("操作成功");
              this.getList();
              this.userRowIndex = null;
            }
          });

        }
      })
    },


    // 修改表格高度触发回调
    updateTableHeight() {
      this.$nextTick(() => {
        this.$refs.table.doLayout();
      });
    },
    // 获取星级回传详细信息
    getStarHaulDetail(row) {
      starHaulQueryById(row?.id).then(res=>{
        if(res.code == 200){
          // 打开星级回传抽屉框
          this.$refs.starHaulEditRef.openDrawer({...res?.data})
        }
      })
    },
    // 获取撞库通过率详细信息
    getIsPassRatioDetail(row) {
      queryPassRatioById(row?.id).then(res=>{
        if(res.code == 200){
          // 打开撞库通过率抽屉框
          this.$refs.isPassRatioEditRef.openDrawer({...res?.data})
        }
      })
    },
    //  获取回传限制详细信息
    getCallbackLimitDetail(row) {
      getStarUpLimit(row?.id).then(res=>{
        if(res.code == 200){
          // 打开回传限制抽屉框
          this.$refs.starUpLimitRef.openDrawer({...res?.data})
        }
      })
    },
    // 处理对话框
    handelDialog(title, row = null) {
      row && this.$set(this,'row',row)
      switch (title) {
        case "添加":
          // 添加操作打开对应渠道详情页面
          console.log(title,row);
          this.$router.push({
            path:'/business/channelManagement/detail',
            query:{
              
            }
          })
          return
        case "编辑":
          // 编辑操作打开对应渠道详情页面
          console.log(title,row);
          this.$router.push({
            path:'/business/channelManagement/detail',
            query:{
              id:row?.id,
              type:'edit'
            }
          })
          return
        case "星级回传":
          // 获取星级回传详细信息
          this.getStarHaulDetail(row)
          break;
        case "撞库通过率":
          // 获取撞库通过率详细信息
          this.getIsPassRatioDetail(row)
          break;
        case '回传限制':
          // 获取回传限制详细信息
          this.getCallbackLimitDetail(row)
          break;
        case "抽单设置":
          // 抽单设置打开编辑弹框
          console.log(title,row);
          this.title = '抽单设置';
          // 获取抽单设置数据
          this.getExtractDetail(row?.id);
          this.dialogShow = true;
          break;
        case "采量限制":
          // 抽单设置打开编辑弹框
          console.log(title,row);
          // 打开采量限制弹框
          this.$refs.pickEditDialogRef.showDialog(row)
          return
        case "城市变价":
          this.title = '城市变价';
          // 打开城市变价组件
          this.$refs.cityUpdPriceRef.openHandle(row)
          break;
        case "查看":
          // 查看操作打开对应渠道详情页面
          console.log(title,row);
          this.$router.push({
            path:'/business/channelManagement/detail',
            query:{
              id:row?.id,
              type:'view'
            }
          })
          return
        default:
        // 其他操作
      }
      
    },
    getExtractDetail(id){
      queryExtractById(id).then(res=>{
        if(res.code === 200){
          // 表单数据回显
          this.form = res.data;
        }
      })
    },
     /*关闭弹窗*/
    handleClose(){
      this.$refs['formRef'].resetFields();
      this.form = this.$options.data().form;
      this.dialogShow = false;
    },
    // 关闭添加任务弹窗
    closeAddTask(){
      this.$refs['formRef'].resetFields();
      this.form = this.$options.data().form;
      console.log("--------------",this.$options.data().form);
      
      this.addTaskShow = false
    },
    // 取消删除
    hanCancelDel(){
      this.$message({
        type: 'info',
        message: '已取消删除操作'
      });
    },
    // 删除列表项
    handelDel(row) {
      let { id } = row
      delUpChannel(id).then(res=>{
        if(res.code === 200) {
          this.$message.success('删除成功')
          this.getList()
        }
      })
      
    },
    /*提交操作*/
    handleSubmit(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let params={};
          params = JSON.parse(JSON.stringify(this.form))
          // console.log(params);
          // 抽金基数金额化为两位小数字符串
          if(params.extractMoney != null){
              params.extractMoney = params.extractMoney.toFixed(2)
          }
          // 抽取进件比例转化为两位小数字符串
          if(params.extractRatio != null){
              params.extractRatio = params.extractRatio.toFixed(2)
          }
          editExtract(params).then(res=>{
              if(res.code === 200) {
                this.$message.success('操作成功')
                this.handleClose()
              }
           })

        }
      })
    },
  },
};
</script>

<style scoped lang="scss">
.title {
  font-size: 20px;
  color: #333333;
  font-weight: 500;
}
.search-box {
  margin: 0 0 20px;
  padding: 20px 20px 0;
  background: #fff;
  align-items: flex-start;
  border-radius: 6px;
}
.search-area {
  position: absolute;
  right: 20px;
}
.el-form-item__content {
  flex: 1;
  line-height: 40px;
  position: relative;
  font-size: 14px;
  min-width: 0;
}
::v-deep .el-dialog__body{
  border-top: 1px solid #dfe6ec;
  border-bottom: 1px solid #dfe6ec;
}
.el-table {
  // 滚动条加粗
  --scrollbar-height: 9px;
}
</style>
